<template>
    <y-dialog @open="open" @close='emit("close")' width="1000px" append-to-body>
        <el-table v-loading="loading" :data="records" border style="width: 100%">
            <el-table-column type="expand">
                <template #default="props">
                    <div m="4">
                        <el-table :data="props.row.steps" border>
                            <el-table-column label="序号" prop="id" width="80" />
                            <el-table-column label="步骤" prop="step" :show-overflow-tooltip="true" />
                            <el-table-column label="预期值" prop="exp" :show-overflow-tooltip="true" />
                            <el-table-column label="实际值" prop="actual" :show-overflow-tooltip="true">
                                <template #default="scope">
                                    <span>{{ scope.row.actual }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="测试结果" prop="result" align="center" width="80">
                                <template #default="scope">
                                    <y-dict-tag :options="tms_tc_result" :value="scope.row.result" />
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" fixed="right" align="center" width="80">
                                <template #default="scope">
                                    <el-tooltip content="日志" placement="top">
                                        <el-button link type="primary" icon="ChatDotSquare" @click="handleJobLog(scope.row)"
                                            v-hasPermi="['tms:job:log']">
                                        </el-button>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="开始执行时间" prop="run_time" />
            <el-table-column label="结束执行时间" prop="finished" />
            <el-table-column label="执行结果" prop="status">
                <template #default="scope">
                    <y-dict-tag :options="tms_job_status" :value="scope.row.status" />
                </template>
            </el-table-column>
        </el-table>
        <!--列表分页-->
        <y-pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.limit"
            @pagination="getList" />
        <br />

        <!-- 用例日志详情展示 -->
        <el-dialog title="执行日志" v-model="openLog" width="1000px" @close="openLog = false" append-to-body>
            <el-form :model="form" label-width="100px">
                <el-input :rows="15" readonly="readonly" prop="detail" label-width="100px" v-model="form.detail"
                    type="textarea" />
            </el-form>
        </el-dialog>
    </y-dialog>
</template>

<script setup name="History">
const route = useRoute()
const { proxy } = getCurrentInstance();

const emit = defineEmits(['close'])

const { tms_job_status, tms_tc_result } = proxy.useDict(
    "tms_job_status",
    "tms_tc_result",
);

const total = ref(0);
const loading = ref(false);
const records = ref([]);
const openLog = ref(false)

const props = defineProps({
    id: { type: String, default: null },
    listJobLog: { type: Function, default: undefined },
});

const data = reactive({
    form: {},
    queryParams: {
        job: route.query.job,
        testcase: undefined,
        page: 1,
        limit: 5,
    },
});

const { form, queryParams } = toRefs(data);

/** 打开对话框事件 */
function open() {
    getList();
}

/** 详细日志按钮操作 */
function handleJobLog(row) {
    openLog.value = true;
    form.value = row;
}

/** 获取执行结果 */
function getList() {
    loading.value = true;
    queryParams.value.testcase = props.id
    props.listJobLog(queryParams.value).then((res) => {
        records.value = res.data;
        total.value = res.total;
        loading.value = false;
    });
}
</script>
